coverimage.js ➔ ... ➔ $(window).ci.resize - Code Metrics - Inspection of "master" - thisislawatts/coverimage - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( b20456...a613a9 )

by LA

created 2017-03-10 09:16 UTC

coverimage.js ➔ ... ➔ $(window).ci.resize A

↳ Parent: coverimage.js ➔ CoverImage

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	1
c	1
b	0
f	0
nc	1
nop	0
dl	0
loc	3
rs	10

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
if (a > 0)
    b = 42;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var elementResizeDetectorMaker = require('element-resize-detector');

var CoverImage = function () {

	function CoverImage(el, cb) {
		_classCallCheck(this, CoverImage);

		var _this = this;

		_this.$el = el ? el : window;
		_this.$img = _this.getElementForSizing();
		_this.disableOnMobile = _this.$el.dataset['cover-image-mobile'] === 'false';
		_this.cb = cb || function () {
			//DEBUG console.log("Default callback");
		};

		_this.positioning = {
			x: 0.5,
			y: 0.5
		};
		_this.options = {
			parallax: _this.$el.dataset.coverImageParallax === 'true'
		};

		if (!_this.$img) {
			console.log('Error:', 'no image found', _this.$img);

			return;
		}

		_this.imageWidth = _this.$img.width;
		_this.imageHeight = _this.$img.height;

		// If the image doesn't have harcoded width|height
		// attributes then load the image to calculate
		// the dimensions
		if (!_this.imageWidth || !_this.imageHeight) {
			console.log('No dimensions found. Generating image:', _this.$img.attr('src'));
			_this.img = new Image();
			_this.img.src = _this.$img.attr('src');

			_this.imageWidth = _this.img.width;
			_this.imageHeight = _this.img.height;
		}

		if (_this.disableOnMobile && window.innerWidth < 480) {
			return;
		}

		_this.elementDimensions = {
			height: _this.$el.clientHeight,
			width: _this.$el.clientWidth
		};

		_this.$el.style = '\n\t\t\toverflow : hidden;\n\t\t\tposition : relative;\n\t\t';

		if (!_this.$img) {
			// TODO: Implement load
			setTimeout(function () {
				new CoverImage(_this.$el);

			}, 1000);
		} else {
			_this.resizeImage();
		}

		_this.$img.addEventListener('load', function () {
			_this.resizeImage();
		}, false);

		_this.$el.addEventListener('transitionend', function () {
			_this.resizeImage();
		}, false);

		var erd = elementResizeDetectorMaker({
			strategy: 'scroll'
		});

		erd.listenTo(_this.$el, function () {
			_this.resizeImage();
		});

		_this.$el.addEventListener('animationend', function () {
			_this.resizeImage();
		}, false);

		window.addEventListener('resize', function () {
			_this.resizeImage();
		}, true);

		window.addEventListener('ci.resize', function () {
			_this.resizeImage();
		}, true);

		if (_this.options.parallax) {
			_this.draw();
		}
	}

	/**
  * Parallax FX
  *
  */


	_createClass(CoverImage, [{
		key: 'draw',
		value: function draw() {
			var _this = this;
			var friction = 0.5;
			var imageOffsetX = document.body.scrollTop * friction;
			var imageOffsetY = document.body.scrollTop * friction;
			var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
			var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;

			if (maximumMovementX > 0) {
				if (imageOffsetX < maximumMovementX) {
					// console.log('New position:', maximumMovementX - imageOffsetX);
					_this.$img.css({
						'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)'
					});
				}
			} else {
				if (imageOffsetY < maximumMovementY) {
					_this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)');
				}
			}

			window.requestAnimationFrame(function () {
				_this.draw();
			});
		}

		/**
   *
   * @return DOM Element
   */

	}, {
		key: 'getElementForSizing',
		value: function getElementForSizing() {
			var _this = this;
			var selector = _this.$el.dataset['coverImageEl'];

			if (selector) {

				console.log('Element selector Present', _this.$el.find(selector));


				return _this.$el.find(selector) ? _this.$el.find(selector) : _this.$el.find('img');
			}

			return _this.$el.querySelector('img');
		}
	}, {
		key: 'resizeImage',
		value: function resizeImage() {
			var _this = this;
			var elementWidth = _this.$el.clientWidth;
			var elementHeight = _this.$el.clientHeight;
			var dimensions = _this.coverDimensions(_this.imageWidth, _this.imageHeight, elementWidth, elementHeight);

			_this.imageDimensions = dimensions;

			if (isNaN(dimensions.width)) {
				console.log('Failed to calculate image sizes.');

			}

			_this.setImageSize();
		}
	}, {
		key: 'setImageSize',
		value: function setImageSize() {
			var _this = this;

			_this.$img.width = _this.imageDimensions.width;
			_this.$img.height = _this.imageDimensions.height;

			var transform = _this.getTransform((_this.$el.clientWidth - _this.imageDimensions.width) * _this.positioning.y, (_this.$el.clientHeight - _this.imageDimensions.height) * _this.positioning.x);

			_this.$img.style = '\n\t\t\tposition: absolute;\n\t\t\twidth: ' + _this.imageDimensions.width + ';\n\t\t\theight: ' + _this.imageDimensions.height + ';\n\t\t\ttransform: ' + transform + ';\n\t\t\tmax-width: none;\n\t\t';

			_this.$img.classList.add('ci--sized');
			_this.cb();
		}
	}, {
		key: 'getTransform',
		value: function getTransform(x, y) {
			return 'translate3d(' + x + 'px,' + y + 'px,0)';
		}
	}, {
		key: 'coverDimensions',
		value: function coverDimensions(child_w, child_h, container_w, container_h) {
			var scale_factor = this.max(container_w / child_w, container_h / child_h);

			return {
				width: Math.ceil(child_w * scale_factor),
				height: Math.ceil(child_h * scale_factor)
			};
		}
	}, {
		key: 'containDimensions',
		value: function containDimensions(child_w, child_h, container_w, container_h) {
			var scale_factor = this.min(container_w / child_w, container_h / child_h);

			return {
				width: child_w * scale_factor,
				height: child_h * scale_factor
			};
		}
	}, {
		key: 'min',
		value: function min(a, b) {
			return a > b ? b : a;
		}
	}, {
		key: 'max',
		value: function max(a, b) {
			return a > b ? a : b;
		}
	}]);

	return CoverImage;
}();

var elems = document.body.querySelectorAll('[data-cover-image]');

elems.forEach(function (el) {
	new CoverImage(el);

});
//# sourceMappingURL=coverimage.js.map

1		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
		0 ignored issues – show Coding Style Best Practice introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
2
3		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
5		var elementResizeDetectorMaker = require('element-resize-detector');
6
7	View Code Duplication	var CoverImage = function () {
		0 ignored issues – show Duplication introduced 2017-03-10 09:18 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
8		function CoverImage(el, cb) {
9		_classCallCheck(this, CoverImage);
10
11		var _this = this;
12
13		_this.$el = el ? el : window;
14		_this.$img = _this.getElementForSizing();
15		_this.disableOnMobile = _this.$el.dataset['cover-image-mobile'] === 'false';
16		_this.cb = cb \|\| function () {
17		//DEBUG console.log("Default callback");
18		};
19
20		_this.positioning = {
21		x: 0.5,
22		y: 0.5
23		};
24		_this.options = {
25		parallax: _this.$el.dataset.coverImageParallax === 'true'
26		};
27
28		if (!_this.$img) {
29		console.log('Error:', 'no image found', _this.$img);
		0 ignored issues – show Debugging Code introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
30		return;
31		}
32
33		_this.imageWidth = _this.$img.width;
34		_this.imageHeight = _this.$img.height;
35
36		// If the image doesn't have harcoded width\|height
37		// attributes then load the image to calculate
38		// the dimensions
39		if (!_this.imageWidth \|\| !_this.imageHeight) {
40		console.log('No dimensions found. Generating image:', _this.$img.attr('src'));
41		_this.img = new Image();
42		_this.img.src = _this.$img.attr('src');
43
44		_this.imageWidth = _this.img.width;
45		_this.imageHeight = _this.img.height;
46		}
47
48		if (_this.disableOnMobile && window.innerWidth < 480) {
49		return;
50		}
51
52		_this.elementDimensions = {
53		height: _this.$el.clientHeight,
54		width: _this.$el.clientWidth
55		};
56
57		_this.$el.style = '\n\t\t\toverflow : hidden;\n\t\t\tposition : relative;\n\t\t';
58
59		if (!_this.$img) {
60		// TODO: Implement load
61		setTimeout(function () {
62		new CoverImage(_this.$el);
		0 ignored issues – show Unused Code Best Practice introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report The object created with `new CoverImage(_this.$el)` is not used but discarded. Consider invoking another function instead of a constructor if you are doing this purely for side effects. Loading history...
63		}, 1000);
64		} else {
65		_this.resizeImage();
66		}
67
68		_this.$img.addEventListener('load', function () {
69		_this.resizeImage();
70		}, false);
71
72		_this.$el.addEventListener('transitionend', function () {
73		_this.resizeImage();
74		}, false);
75
76		var erd = elementResizeDetectorMaker({
77		strategy: 'scroll'
78		});
79
80		erd.listenTo(_this.$el, function () {
81		_this.resizeImage();
82		});
83
84		_this.$el.addEventListener('animationend', function () {
85		_this.resizeImage();
86		}, false);
87
88		window.addEventListener('resize', function () {
89		_this.resizeImage();
90		}, true);
91
92		window.addEventListener('ci.resize', function () {
93		_this.resizeImage();
94		}, true);
95
96		if (_this.options.parallax) {
97		_this.draw();
98		}
99		}
100
101		/**
102		* Parallax FX
103		*
104		*/
105
106
107		_createClass(CoverImage, [{
108		key: 'draw',
109		value: function draw() {
110		var _this = this;
111		var friction = 0.5;
112		var imageOffsetX = document.body.scrollTop * friction;
113		var imageOffsetY = document.body.scrollTop * friction;
114		var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
115		var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;
116
117		if (maximumMovementX > 0) {
118		if (imageOffsetX < maximumMovementX) {
119		// console.log('New position:', maximumMovementX - imageOffsetX);
120		_this.$img.css({
121		'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)'
122		});
123		}
124		} else {
125		if (imageOffsetY < maximumMovementY) {
126		_this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)');
127		}
128		}
129
130		window.requestAnimationFrame(function () {
131		_this.draw();
132		});
133		}
134
135		/**
136		*
137		* @return DOM Element
138		*/
139
140		}, {
141		key: 'getElementForSizing',
142		value: function getElementForSizing() {
143		var _this = this;
144		var selector = _this.$el.dataset['coverImageEl'];
145
146		if (selector) {
147
148		console.log('Element selector Present', _this.$el.find(selector));
		0 ignored issues – show Debugging Code introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
149
150		return _this.$el.find(selector) ? _this.$el.find(selector) : _this.$el.find('img');
151		}
152
153		return _this.$el.querySelector('img');
154		}
155		}, {
156		key: 'resizeImage',
157		value: function resizeImage() {
158		var _this = this;
159		var elementWidth = _this.$el.clientWidth;
160		var elementHeight = _this.$el.clientHeight;
161		var dimensions = _this.coverDimensions(_this.imageWidth, _this.imageHeight, elementWidth, elementHeight);
162
163		_this.imageDimensions = dimensions;
164
165		if (isNaN(dimensions.width)) {
166		console.log('Failed to calculate image sizes.');
		0 ignored issues – show Debugging Code introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
167		}
168
169		_this.setImageSize();
170		}
171		}, {
172		key: 'setImageSize',
173		value: function setImageSize() {
174		var _this = this;
175
176		_this.$img.width = _this.imageDimensions.width;
177		_this.$img.height = _this.imageDimensions.height;
178
179		var transform = _this.getTransform((_this.$el.clientWidth - _this.imageDimensions.width) * _this.positioning.y, (_this.$el.clientHeight - _this.imageDimensions.height) * _this.positioning.x);
180
181		_this.$img.style = '\n\t\t\tposition: absolute;\n\t\t\twidth: ' + _this.imageDimensions.width + ';\n\t\t\theight: ' + _this.imageDimensions.height + ';\n\t\t\ttransform: ' + transform + ';\n\t\t\tmax-width: none;\n\t\t';
182
183		_this.$img.classList.add('ci--sized');
184		_this.cb();
185		}
186		}, {
187		key: 'getTransform',
188		value: function getTransform(x, y) {
189		return 'translate3d(' + x + 'px,' + y + 'px,0)';
190		}
191		}, {
192		key: 'coverDimensions',
193		value: function coverDimensions(child_w, child_h, container_w, container_h) {
194		var scale_factor = this.max(container_w / child_w, container_h / child_h);
195
196		return {
197		width: Math.ceil(child_w * scale_factor),
198		height: Math.ceil(child_h * scale_factor)
199		};
200		}
201		}, {
202		key: 'containDimensions',
203		value: function containDimensions(child_w, child_h, container_w, container_h) {
204		var scale_factor = this.min(container_w / child_w, container_h / child_h);
205
206		return {
207		width: child_w * scale_factor,
208		height: child_h * scale_factor
209		};
210		}
211		}, {
212		key: 'min',
213		value: function min(a, b) {
214		return a > b ? b : a;
215		}
216		}, {
217		key: 'max',
218		value: function max(a, b) {
219		return a > b ? a : b;
220		}
221		}]);
222
223		return CoverImage;
224		}();
225
226		var elems = document.body.querySelectorAll('[data-cover-image]');
227
228		elems.forEach(function (el) {
229		new CoverImage(el);
		0 ignored issues – show Unused Code Best Practice introduced 2017-03-10 09:18 UTC by Report Bug Copy Issue Report The object created with `new CoverImage(el)` is not used but discarded. Consider invoking another function instead of a constructor if you are doing this purely for side effects. Loading history...
230		});
231		//# sourceMappingURL=coverimage.js.map

thisislawatts / coverimage

Push — master ( b20456...a613a9 )

coverimage.js ➔ ... ➔ $(window).ci.resize A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like